<template>
  <div class="sidebar">
    <div class="userinfo">
      <div class="avatar">
        <img
          src="https://cdn.pixabay.com/photo/2021/01/29/08/10/musician-5960112_960_720.jpg"
          alt="Workflow"
        />
      </div>
      <span>Hello,{{ nickname }}</span>
    </div>
    <div class="list">
      <nav class="userlist">
        <div class="usermenu">
          <div>
            <span class="menu">MENU</span>
          </div>
          <div class="yunpan">
            <div class="yunpaninfo">
              <i class="iconfont icon-yunpan yunpanicon"></i>
              <span>云盘</span>
            </div>
          </div>
        </div>
        <div class="userplaylist">
          <span>PLAYLIST</span>
          <div class="playlists">
            <div
              class="playlistitems"
              v-for="(item, index) in artists"
              :key="index"
              @click="transmitId(item)"
            >
              <img
                style="height: 40px; width: 40px"
                :src="item.img1v1Url"
                alt=""
              />
              <div class="playlistinfo">
                <span>歌手：{{ item.name }}</span>
                <!-- <span>歌曲数量:{{}}首</span> -->
              </div>
            </div>
          </div>
        </div>
      </nav>
    </div>
  </div>
</template>
<script>
import { getSongerList } from "../api/request.js";
import { ref } from "@vue/reactivity";
import { onMounted } from "@vue/runtime-core";
import emitter from "../bus/index";

export default {
  name: "MySideBar",
  setup() {
    let nickname = ref("uuid");
    let artists = ref([]);

    //传递歌手Id
    const transmitId = (item) => {
      emitter.emit("sendId", item.id);
    };

    onMounted(() => {
      getSongerList("/artist/list").then((res) => {
        artists.value = res.data.artists;
        //首次展示歌手
        emitter.emit("sendId", artists.value[0].id);
      });
    });
    return {
      nickname,
      artists,
      transmitId,
      getSongerList,
    };
  },
};
</script>
<style scoped>
* {
  padding: 0;
  margin: 0;
}
.sidebar {
  width: 21vw;
  height: 100%;
  position: fixed;
  top: 0;
  background: #fff;
  font-size: 13px;
}
.userinfo {
  height: 100px;
  text-align: center;
}
.avatar img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin: 5px 0;
}
.yunpaninfo {
  height: 40px;
  display: flex;
  align-items: center;
}
.yunpanicon {
  padding: 10px 10px;
}

.usermenu span,
.userplaylist span {
  padding: 0 5px;
}
a {
  text-decoration: none;
}
.playlists {
  overflow-y: scroll;
  height: 75vh;
}
.playlistitems {
  display: flex;
  padding: 5px;
}
.playlistitems:hover {
  cursor: pointer;
  background-color: rgba(214, 214, 214, 0.8);
  color: rgb(255, 255, 255);
}
.playlistitems img {
  height: 40px;
  width: 40px;
  border-radius: 10px;
}
.playlistinfo {
  padding: 8px 5px;
  /* flex-direction: column; */
  display: flex;
}

/* // 滚动条宽度 */
div::-webkit-scrollbar {
  width: 6px;
}
/* // 滚动条轨道 */
div::-webkit-scrollbar-track {
  background: rgb(239, 239, 239);
  border-radius: 2px;
}
/* // 小滑块 */
div::-webkit-scrollbar-thumb {
  background: rgba(72, 69, 69, 0.5);
  border-radius: 10px;
}
div::-webkit-scrollbar-thumb:hover {
  background: #333;
}
</style>